<template>
  <f7-page>
    <f7-navbar>
      <f7-list>
          <f7-list-item
           link="/setting/"
           :title="$store.state.user.account"
           :after="$t('menu.roles.'+$store.state.roleKeys[$store.state.permissions.user.roleKeys])"
           panel-close
           view="#main-view"
         >

         <f7-icon color="white" slot="media" f7="person" size="20px"></f7-icon>
       </f7-list-item>
       </f7-list>
    </f7-navbar>

    <f7-block>
			<f7-row>
  			<f7-col><f7-badge color="green">{{$store.state.onlineState.online}}</f7-badge></f7-col>
  			<f7-col><f7-badge color="gray">{{$store.state.onlineState.offline}}</f7-badge></f7-col>
  			<f7-col><f7-badge>{{$store.state.onlineState.notactive}}</f7-badge></f7-col>
			</f7-row>
		</f7-block>
    <f7-list accordion-list>

      <!-- <f7-list-item accordion-item title="默认分组">
        <f7-accordion-content >
        <f7-list> -->
          <f7-list-item v-for="(device,index) in $store.state.devices.list">
 										 <f7-link panel-close @click="selectDevice(device.id)">
                       <f7-icon v-if="device.status==-1" f7="info" size="20px" color="gray"></f7-icon>
                       <f7-icon v-else f7="settings_fill" v-bind:class="{ icon_spin: device.motion==1 }" size="20px" :color="device.status==0?'gray':'green'"></f7-icon>
                       <span style="color:#fff">{{device.name}}</span></f7-link>
 					</f7-list-item>
        <!-- </f7-list>
        </f7-accordion-content>
      </f7-list-item> -->

      </f7-list>
      <f7-block>
        <f7-row>

          <f7-col>
            <f7-button panel-close view="#main-view" fill color="blue" @click="$f7.views.main.router.navigate('/add-device/')">{{$t("menu.createDevice")}}</f7-button>
          </f7-col>
        </f7-row>
    </f7-block>
  </f7-page>
</template>
<script>
export default {
			 components: {
			 },
			 data() {
					 return {

					}
			 },
			 methods:{


				 selectDevice(val){
					 this.$store.dispatch('setSelectDeviceId',val);
				 },
				 test(){

				 }
		 },
		 created: function () {

			 },
			 mounted() {


			}
	 }
</script>
<style>
.icon_spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    -webkit-transform-origin:50% 49% 0px;
  }
  @-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
  }
  @-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
